<template>
	<view >
		
		<view class="main_bag ">
			<image :src="src" class="imagebag"></image>
			<!-- 搜索 -->
			<view class="home_" :style="{ paddingTop: statusBarHeight+40+  'px'}">
				<view class="home_logo">
					<view>
						<image :src="homelogo" class="logoimage"></image>
					</view>
					
					<view class="search_bag" @click="toSearch">
							<text class="search_text">搜索</text>
							<view class="search_btn">
								搜索
							</view>
					</view>
				</view>
				
				<view class="home_top ">
					<image :src="src2" class="home_bag"></image>
					<!--  -->
					<view class="home_coment">
						<!--  -->
						<view class="home_user">
							<view class="home_user2">
								<u-avatar :src="src" ></u-avatar>
								<text class="user_name">下午好，南部子 ></text>
							</view>
							<view class="user_student">
								<image :src="myicon" class="student_icon"></image>
								<text class="student_name">学习记录</text>
							</view>
						</view>
						<!--  -->
						<view class="user_table" >
							<view class="table_item">
								<image :src="tabicon1" class="table_icon"></image>
								<text class="table_name">联系助教</text>
							</view>
							<view class="table_item">
								<image :src="tabicon2" class="table_icon"></image>
								<text class="table_name">订阅公众号</text>
							</view>
							<view class="table_item">
								<image :src="tabicon3" class="table_icon"></image>
								<text class="table_name">最新活动</text>
							</view>
							<view class="table_item">
								<image :src="tabicon4" class="table_icon"></image>
								<text class="table_name">提点建议</text>
							</view>
						</view>
						<!-- 学习时间 -->
						<view class="xian"></view>
						<!--  -->
						<view class="persist">
							<view class="persion_jianchi">
								<text class="persion_name2">坚持学习</text>
								<text class="persion_name">1天</text>
							</view>
							<view class="persion_jianchi">
								<text class="persion_name2">今日学习</text>
								<text class="persion_name">0时0分</text>
							</view>
							<view class="persist_studenttag">
								<view class="persist_student">
									<image :src="myicon" class="student_icon"></image>
									<text class="student_name">学习记录</text>
								</view>
								
							</view>
						</view>
					</view>
					
				</view>
			</view>
			<!-- 切换 -->
			<view class="container">
			    <!-- 横向滚动选项卡 -->
			    <scroll-view scroll-x class="tab-scroll" :scroll-with-animation="true">
			      <view 
			        v-for="(item, index) in books" 
			        :key="index"
			        class="tab-item"
			        :class="{ active: currentIndex === index }"
			        @click="switchTab(index)"
			      >
			        <image 
			          v-if="currentIndex === index" 
			          :src="item.bgImage" 
			          class="tab-bg"
			          mode="aspectFill"
			        />
			        <text class="tab-text">{{ item.title }}</text>
			      </view>
			    </scroll-view>
			
			    <!-- 内容区域 -->
			    <view class="content">
					<view class="course">
						<image :src="src" class="courseimage"></image>
						<view class="course_title">
							<view class="course_title_tag">合集</view>
							滴天髓解析，隐藏技能大发
						</view>
					</view>
					<view class="gather_more">
						<view class="gather_more_title" style="color: #000;">章节更新</view>
						<view class="gather_more_title" style="color: #999;">更多 <view style="color: #333;margin-left: 5px;">></view></view>
					</view>
					<GoodsList :goods-data="goodsList" />
			    </view>
			  </view>
		</view>
		
	</view>
</template>

<script>
	import GoodsList from '@/components/goodslist.vue'
	export default {
		 components: {
		    GoodsList
		  },
		data() {
			return {
				homelogo:require("@/static/image/home/home_logo.png"),
				src:require("@/static/image/home/baijing.png"),
				src2:require("@/static/image/home/with_bg.png"),
				myicon:require("@/static/image/home/my_icon.png"),
				tabicon1:require("@/static/image/home/zhujiao.png"),
				tabicon2:require("@/static/image/home/ding.png"),
				tabicon3:require("@/static/image/home/xin.png"),
				tabicon4:require("@/static/image/home/ti.png"),
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				currentIndex: 0,
				goodsList: [
				  {
				    image: 'https://picsum.photos/300/300?random=1',
				    name: '论滴天髓精装版',
				    desc: '八字命理经典著作，深入解析命理',
				    price: '0'
				  },
				  {
				    image: 'https://picsum.photos/300/300?random=2',
				    name: '八字正宗全集',
				    desc: '传统八字命理权威教材，系统全面',
				    price: '88.00'
				  },
				  {
				    image: 'https://picsum.photos/300/300?random=1',
				    name: '论滴天髓精装版',
				    desc: '八字命理经典著作，深入解析命理',
				    price: '68.00'
				  },
				  {
				    image: 'https://picsum.photos/300/300?random=2',
				    name: '八字正宗全集',
				    desc: '传统八字命理权威教材，系统全面',
				    price: '0'
				  },
				],
				books: [
				        { 
				          title: '论滴天髓',
				          bgImage: require("@/static/image/home/choose_table.png")
				        },
				        { 
				          title: '八字正宗',
				          bgImage: require("@/static/image/home/choose_table.png")
				        },
				        { 
				          title: '八字真传',
				          bgImage: require("@/static/image/home/choose_table.png")
				        },
				        { 
				          title: '八字职业',
				          bgImage: require("@/static/image/home/choose_table.png")
				        },
				        { 
				          title: '八字命例',
				          bgImage: require("@/static/image/home/choose_table.png")
				        }
				]
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			console.log('下拉刷新')
			setTimeout(() => {
				console.log('下拉刷新停止')
				uni.stopPullDownRefresh()
			},1000)
		},
		// 上拉加载
		onReachBottom() {
			console.log('上拉加载')
			setTimeout(() => {
				console.log('上拉加载停止')
				uni.stopPullDownRefresh()
			},1000)
		},
		methods: {
			toSearch(){
				uni.navigateTo({
					url:'/pages/index/home/search/search'
				})	
			},
			 switchTab(index) {
			      this.currentIndex = index
				}
		}
	}
</script>

<style scoped lang="scss">
	
	.imagebag {
	  width: 100%;
	  position: absolute;
	  top: 0;
	  left: 0;
	  height: 300px;
	  z-index: 1; /* 明确设置基础层级 */
	}
	.home_ {
	  background-color: #ffffff;
	  .home_logo{
		  display: flex;
		  flex-direction: row;
		  justify-content: space-between;
		  position: relative; /* 关键定位属性 */
		  z-index: 2; /* 必须高于.imagebag */
		  margin-left: 15px;
		  margin-right: 15px;
		  .logoimage{
			  display: flex;
			  width: 100px;
			  height: 30px;
		  }
		  .search_bag{
			  border:1px solid  #e34234;
			  background-color: #ffffff;
			  width: 130px;
			  height: 28px;
			  border-radius: 20px;
			  display: flex;
			  flex-direction: row;
			  justify-content: space-between;
			  align-items: center;
			  .search_text{
				  margin-left: 10px;
				  font-size: 10px;
			  }
			  .search_btn{
				  background-color: #e34234;
				  border-radius: 20px;
				  color: #fff;
				  width: 40px;
				  margin-top: 3px;
				  margin-bottom: 3px;
				  margin-right: 3px;
				  display: flex;
				  height: 20px;
				  align-items: center;
				  justify-content: center;
				  font-size: 10px;
			  }
		  }
	  }
	  .home_top {
	    position: relative;
	    .home_bag {
	      width: 100%;
	      height: 280px;
	      background-blend-mode: multiply;
	      position: relative; /* 关键定位属性 */
	      z-index: 2; /* 必须高于.imagebag */
	    }
		.home_coment{
			width: 85%;
			position: absolute; /* 关键定位属性 */
			z-index: 2; /* 必须高于.imagebag */
			top: 40px;
			left: 30px;
			.home_user{
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				
				.home_user2{
					display: flex;
					flex-direction: row;
					
					.user_name{
						margin-top: 8px;
						margin-left: 10px;
						font-size: 13px;
					}
				}
				.user_student{
					background-color: #fef9e8;
					border: 1px #f2b5a6 solid;
					border-radius: 30px;
					width: 90px;
					height: 30px;
					display: flex;
					flex-direction: row;
					align-items: center;
					.student_icon{
						display: block;
						width: 25px;
						height: 25px;
						margin-left: 5px;
					}
					.student_name{
						color: #000;
						font-size: 12px;
					}
				}
			}
			.user_table{
				display: flex;
				flex-direction: row;
				margin-top: 10px;
				.table_item{
					display: flex;
					 width: 25%;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					.table_icon{
						width: 40px;
						height: 40px;
					}
					.table_name{
						font-size: 13px;
						color: #333;
						margin-top: 5px;
					}
				}
				
			}
			.xian{
				background: #BBBBBB;
				height: 1px;
				margin-left: 15px;
				margin-right: 15px;
				margin-top: 20px;
			}
			.persist{
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				margin-top: 20px;
		
				.persion_jianchi{
					display: flex;
					flex-direction: column;
					flex: 1;
					justify-content: center;
					align-items: center;
					.persion_name{
						margin-top: 20px;
					}
				}
				.persist_studenttag{
						flex: 1;
						display: flex;
						justify-content:flex-end;
					.persist_student{
						
						background-color: #fef9e8;
						border: 1px #f2b5a6 solid;
						border-radius: 30px;
						width: 90px;
						height: 30px;
						display: flex;
						flex-direction: row;
						align-items: center;
						.student_icon{
							display: block;
							width: 25px;
							height: 25px;
							margin-left: 5px;
						}
						.student_name{
							color: #000;
							font-size: 12px;
						}
					}
				}
				
				.persion_name{
					color: #000;
					font-size: 14px;
				}
				.persion_name2{
					color: #666;
					font-size: 12px;
				}
			}
		}
		
	  }
	}
	
	.container {
	  padding: 20rpx;
	}
	
	.tab-scroll {
	  white-space: nowrap;
	  width: 100%;
	  height: 80rpx;
	}
	
	.tab-item {
	  display: inline-flex;
	  position: relative;
	  width: 150rpx;
	  height: 80rpx;
	  margin-right: 20rpx;
	  border-radius: 12rpx;
	  overflow: hidden;
	  justify-content: center;
	  align-items: center;
	}
	
	.tab-bg {
	  position: absolute;
	  width: 100%;
	  height: 100%;
	  opacity: 0.7;
	}
	
	.tab-text {
	  position: relative;
	  color: #333;
	  font-size: 28rpx;
	  font-weight: bold;
	  z-index: 2;
	}
	
	.tab-item.active .tab-text {
	  color: #000000;
	  text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.5);
	}
	
	.content {
	  margin-top: 30rpx;
	
	  min-height: 400rpx;
	  border-radius: 16rpx;
	  .course{
		  .courseimage{
			  display: block;
			  width: 100%;
			  height: 200px;
			  border-radius: 3px;
		  }
		  .course_title{
			  display: flex;
			  flex-direction: row;
			  margin-top: 10px;
			  font-size: 12px;
			  .course_title_tag{
				  background-color: #e34234;
				  border-radius: 3px;
				  color: #fff;
				  font-size: 10px;
				  display: flex;
				  padding: 2px 5px;
				  align-items: center;
				  justify-content: center;
				  margin-right: 10px;
			  }
		  }
	  }
	  .gather_more{
		  display: flex;
		  flex-direction: row;
		  justify-content: space-between;
		  margin-top: 10px;
		  .gather_more_title{
			  font-size: 13px;
			  display: flex;
			  flex-direction: row;
			
		  }
	  }
	}
	
</style>
